import React, { useState } from 'react'
import {
    Link,
    useNavigate
} from "react-router-dom";
import { notification } from 'antd';
import request from "../../utils/requests";
import Photo from '../userinfo/Photo';
export default function Register() {
    const navigate = useNavigate();
    const register = async () => {
        const username = document.getElementById('user').value;
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        const nickname = document.getElementById('nickname').value;
        const data = {
            username, password, confirmPassword, nickname
        };
        const user = await request('/register', { method: "POST", data })
        if (user.data.success) {
            notification['error']({
                message: `${user.data.message}`,
                description:
                  'The world is suidernly late the mountains rivers sre slready autum.',
                duration:2
            });
            navigate('/login');
        } else if (user.data.errors.username) {
            notification['error']({
                message: `${user.data.errors.username[0]}`,
                description:
                  'The world is suidernly late the mountains rivers sre slready autum.',
                duration:2
            });
        } else if (user.data.errors.password) {
            notification['error']({
                message: `${user.data.errors.password[0]}`,
                description:
                  'The world is suidernly late the mountains rivers sre slready autum.',
                duration:2
            });
        } else if (user.data.errors.confirmPassword) {
            notification['error']({
                message: `${user.data.errors.confirmPassword[0]}`,
                description:
                  'The world is suidernly late the mountains rivers sre slready autum.',
                duration:2
            });
        } else if (user.data.errors.nickname) {
            notification['error']({
                message: `${user.data.errors.nickname[0]}`,
                description:
                  'The world is suidernly late the mountains rivers sre slready autum.',
                duration:2
            });
        }
    }
    return (
        <div>
            <div className='login'>
                <section className="main">
                    <div className="bottom-grid">
                        <div className="logo">
                            <h1 title="点击进入工艺品商城"> <Link to="/home">Welcome to the arts and crafts mall</Link></h1>
                        </div>
                    </div>
                    <div className="w3lhny-register">
                        <fieldset>
                            <div className="form">
                                <Photo></Photo>
                                <div className="form-row">
                                    <input type="text" className="form-text" placeholder="请输入用户名" id='user' />
                                </div>
                                <div className="form-row">
                                    <input type="password" className="form-text" placeholder="请输入密码" id='password' />
                                </div>
                                <div className="form-row">
                                    <input type="password" className="form-text" placeholder="请确认密码" id='confirmPassword' />
                                </div>
                                <div className="form-row">
                                    <input type="text" className="form-text" placeholder="请输入昵称" id='nickname' />
                                </div>
                                <div className="form-row button-login">
                                    <button className="btn btn-login" onClick={register}>注册</button>
                                </div>
                            </div>
                        </fieldset>
                        <p className="already">Already have an account <Link to="/login">去登录</Link></p>
                    </div>
                </section >
            </div >
        </div>
    )
}
